<template>
	<view class="detail">
		<uni-load-more v-if="loading" iconType="auto" status="loading" />
		<view class="content" v-else>
			<view class="title">
				{{data.title}}
			</view>
			<view class="info">
				<text>{{data.author}}</text>
				<text>
					<uni-dateformat :date="data.posttime" format="yyyy年MM月dd日 hh:mm:ss" :threshold="[0,0]" />
				</text>
			</view>
			<view class="body">
				{{data.content}}
			</view>
			<view class="pic">
				<template v-if="data.picUrls && data.picUrls.length">
					<image v-for="(item,index) in data.picUrls" :src="item" mode="widthFix" :key="index">
					</image>
				</template>

			</view>
			<view class="btnGroup">
				<button type="default" size="mini" @click="editFn">修改</button>
				<button type="warn" size="mini" @click="removeFn">删除</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0,
				loading: true,
				data: {}
			};
		},
		onLoad(query) {
			this.id = query.id

		},
		onShow() {
			this.getDetail()
		},
		methods: {
			async getDetail() {
				try {
					const {
						result
					} = await uniCloud.callFunction({
						name: 'art_get_row',
						data: {
							id: this.id
						}
					})

					this.loading = false
					this.data = result.data[0]
					uni.setNavigationBarTitle({
						title: this.data.title
					})
				} catch (e) {
					uni.showToast({
						title: '参数有误',
						icon: 'error'
					})
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/index/index'
						})
					}, 800)


				}
			},
			// 删除文章
			removeFn() {
				uni.showModal({
					content: '是否确认删除？',
					success: async (res) => {
						if (res.confirm) {
							const {
								result
							} = await uniCloud.callFunction({
								name: 'art_remove_row',
								data: {
									id: this.id
								}
							})
							if (result.deleted === 1) {
								uni.showToast({
									title: '删除成功~',
									icon: 'success',
									mask: true
								})
								setTimeout(() => {
									uni.reLaunch({
										url: '/pages/index/index'
									})
								}, 800)
							}
						}
					}

				})
			},
			editFn() {
				uni.navigateTo({
					url: `/pages/edit/edit?id=${this.id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.detail {
		.content {
			padding: 30rpx;

			.title {
				text-align: justify;
				font-size: 50rpx;
			}

			.info {
				font-size: 30rpx;
				color: #666;
				padding: 30rpx 0 60rpx;

				text {
					padding-right: 30rpx;
				}
			}

			.body {
				font-size: 36rpx;
				line-height: 1.7em;
			}

			.pic {
				width: 100%;
				padding-top: 50rpx;

				image {
					display: block;
					width: 100%;
					margin-bottom: 30rpx;
				}
			}

			.btnGroup {
				padding: 50rpx 0;

				button {
					margin-right: 30rpx;
				}
			}


		}
	}
</style>